<template lang="html">
<div id="plan">
    <div class="title" v-if="false">当前计划</div>
    <section v-if="false" class="current-plan" :id='current_plan!=null?current_plan.deletePlanID :0'>
        <router-link
        :to="{ name:'plan_detail',params:{id :current_plan == null? 1: current_plan.plan.id, date: $route.params.date,name:$route.name}}"
        class="wrapper"
        :class="{ disable: current_plan == null|| compareDate($route.params.date,current_plan.end,current_plan.start) }">
        <div class="item"
        :style= "'background-image: url('+$qiniu.url+'assets/img/3.jpg)'"
        v-if="current_plan == null || compareDate($route.params.date,current_plan.end,current_plan.start)">
            <div class="text">
              <h1>今日无计划</h1>
              <div class="middle">
                <span>继续加油袄</span>
              </div>
            </div>
        </div>
          <div class="item" :style="{ backgroundImage: 'url(' + current_plan.plan.image + ')' }" v-else>
              <div class="text">
                    <h1>{{current_plan==null?'what':current_plan.plan.name}}</h1>
                    <div class="middle">
                        <span>时间：{{current_plan==null? 0 :current_plan.allday}}天</span>
                        <span>总消耗：{{current_plan==null? 0 :current_plan.plan.kcal}}千卡</span>
                    </div>
                    <div class="current-days">
                        第 <span>{{current_plan==null? 0 :current_plan.today}}/{{current_plan==null? 0 :current_plan.allday}}</span> 天
                    </div>
                    <div class="remove" @click.stop.prevent.once="show()"><img :src="$qiniu.url+'assets/img/remove.png'" alt=""></div>
               </div>
          </div>
        </router-link>
    </section>


    <div class="title" v-if="false">全部计划</div>
    <section class="all-plan">
        <ul>
          <!-- <li v-for="plan in plans"> -->
              <router-link :to="{ name :'plan_detail', params:{id :plan.id, date: $route.params.date,name:$route.name}}"
                            class="wrapper"
                            tag="li"
                            v-for="plan in plans"
                            :key="plan.id"
                            v-if="plan.id !== (current_plan == null ? 0 : current_plan.plan.id) || compareDate($route.params.date,current_plan.end,current_plan.start)">
               <div class="img" :style = "'background-image: url('+ plan.image +')'"></div>
               <div class="item">
                    <div class="text">
                        <span class="planemame">{{plan.name}}</span>
                        <div class="middle">
                        <span>时间：{{plan.day}}天</span> 
                        <!--<span>总消耗：{{  }}千卡</span>-->
                        <span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0'>总消耗：{{ plan ==null ? 0 :plan.kcal }}千卡</span>
                        <span v-else>总消耗：{{ plan == null ? 0 : plan.dynamicKcal }}千卡</span>
                        </div>
                    </div>
                </div>

              </router-link>
          <!-- </li> -->
        </ul>
    </section>
    <ToolTip :select='select'  v-on:deletes = 'deletes' v-on:hide='hide' ></ToolTip>
    <Loading v-if="LoadingShow"></Loading>
    <div class="modelwrapper">

  </div>
</div>
</template>

<script>
    import Loading from '../loading';
    import ToolTip from '../common/tooltips.vue';
    import {
        refreshTitle,
        today,
    } from "../../tools.js";
    import api from '../../api';

    export default {

        components: {
            Loading,
            ToolTip,
        },
        data() {
            return {
                current_plan: null,
                select: null,
            }
        },
        created() {
            //获取当前计划
            api.getCurrentPlan().then(response => {
                // console.log(response.data);
                if (response.status == 200) {
                    if (response.data.code == 101) {
                        this.current_plan == null
                    } else {
                        this.current_plan = response.data.result;
                        this.current_plan.plan.kcal = response.data.result.plan.kcal.toFixed(1);
                        this.current_plan.plan.dynamicKcal = parseInt(response.data.result.plan.dynamicKcal);
                        console.log()
                    }
                }
            });
            refreshTitle(this.$route.meta.title);

            if (this.$store.state.plan.plans.length !== 0) {
                return
            } else if (this.$store.state.plan.plans.length == 0) {
                this.$store.dispatch('GET_ALLPLAN');
            }
        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            plans() {
                return this.$store.state.plan.plans
            },
            delete_plan() {
                return this.$store.state.allplan
            },
            getUserInfo() {
                return this.$store.state.user
            },
        },
        methods: {
            compareDate(date1, date2, date3) {
                if (date1 === null || date2 === null || date3 === null) {
                    return false;
                }
                //date1为字符串转换成,分隔的字符串
                var t1 = Date.parse(date1);
                var t2 = Date.parse(date2);
                var t3 = Date.parse(date3);
                if (t1 > t2 || t1 < t3) {
                    return true;
                } else {
                    return false;
                }
            },
            deletes() {
                var id = document.querySelector(".current-plan").getAttribute("id");
                this.$store.dispatch('DELETE_CURRENT_PLAN', id); // action
                this.current_plan = null; // 置空
                this.hide();
            },
            hide() {
                document.querySelector('.modelwrapper').style.display = "none";
                // document.getElementById('tooltip').style.display = "none";
                this.select = null;
            },
            show() {
                document.querySelector('.modelwrapper').style.display = "block";
                this.select = "delplan";
            },
            today() {
                return this.$route.params.date;
            }
        },
        mounted() {
            this.$nextTick(function() {})
        },
    }
</script>

<style>
    #plan {
        font-size: 16px;
        .disable {
            pointer-events: none
        }
        .title {
            font-size: 16px;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
            padding: 3% 3% 3% 7%;
            background-color: rgb(50, 55, 77);
            color: #fdb811;
        }
        .wrapper {
            display: block;
            width: 100%;
            height: 150px;
            position: relative;
            color: #fdb811;
            .img {
                width: 100%;
                height: 100%;
                overflow: hidden;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                position: absolute;
                top: 0;
                left: 0;
            }
            .item {
                /*background-image: url('../../assets/img/3.jpg');*/
                /*background-size: cover;
                background-repeat: space;*/
                width: 100%;
                height: 100%;
                padding-left: 20px;
                box-sizing: border-box;
                position: absolute;
                padding-top: 10px;
                top: 0px;
                left: 0;
                background-color: rgba(0, 0, 0, .6);
                .text {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    padding: 35px 20px;
                    background-color: rgba(0, 0, 0, 0.3);
                    /*padding: 7%;*/
                    box-sizing: border-box;
                    /*z-index: 999;*/
                    .planemame {
                        font-weight: 400;
                        font-size: 25px;
                        display: inline-block;
                        line-height: 40px;
                        border-bottom: 1px solid #fdb811;
                    }
                    .middle {
                        margin-top: 10px;
                        span {
                            margin-right: 5%;
                        }
                    }
                    .current-days {
                        padding-top: 5%;
                        span {
                            font-size: 16px;
                        }
                    }
                    .remove {
                        position: absolute;
                        bottom: 15%;
                        right: 5%;
                        img {
                            width: 80%;
                            height: 80%;
                        }
                    }
                }
            }
        }
        .current-plan {
            position: relative;
        }
        .all-plan {
            ul li {
                margin-bottom: 0.3rem;
            }
            /*.item {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }*/
        }
        .modelwrapper {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 900;
            background-color: rgba(0, 0, 0, .7);
            display: none;
        }
    }
</style>